<template>
  <div>
    <!-- 修改个人信息 -->
    <div>
      <div>
        <van-nav-bar
          title="个人中心"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        >
        </van-nav-bar>
      </div>
      <div class="modifyMine">
        <van-cell-group>
          <van-field
            v-model="$store.state.userInfo.userName"
            label="昵称"
            placeholder="请输入用户名"
          />
          <van-field
            v-model="$store.state.userInfo.phonenumber"
            label="手机号"
            placeholder="请输入用户名"
          />
          <van-field
            v-model="$store.state.userInfo.email"
            label="邮箱"
            placeholder="请输入邮箱"
          />
        </van-cell-group>
        <div class="sureREpair">
          <van-button type="primary" @click="onclick">确认修改</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mineMessage } from "../api/api";

export default {
  name: "changeUser",
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    onclick() {
      //   修改个人信息

      console.log(this.seemineMessage);
      mineMessage(
        this.$store.state.userInfo.userName,
        this.$store.state.userInfo.phonenumber
      ).then((res) => {
        console.log(res);
        // this.flag = true;
        this.$store.commit("changeLogin", {
          isLogin: true,
          userInfo: res.data,
        });
        this.$router.push("/mine");
        
      });
    },
  },
};
</script>
<style scoped lang="less">
.contentBox {
  background-color: #f4f4f4;
}
.van-button--primary {
  color: #fff;
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
.van-button {
  height: 44px;
  border-radius: 29px;
  width: 200px;
}
.sureREpair {
  margin-top: 50px;
  text-align: center;
}
.bodyBox {
  background-color: #fff;
}
.filedBox {
  margin-top: -3%;
  width: 54px;
  height: 54px;
  border-radius: 27px;
  // background-color: pink;
}
// 顶部
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
/deep/.van-field__label {
  width: 3.2em;
}
// 内容
.right {
  float: right;
  position: absolute;
  top: 0;
  right: 5%;
  width: 14%;
  height: 100%;
  // background-color: red;
  border-radius: 87%;
  clear: both;
  line-height: 100%;
}
.right img {
  width: 100%;
  height: 100%;
  border-radius: 87%;
}
.contentList > li {
  position: relative;
  clear: both;

  margin-bottom: 2px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  padding: 5% 5%;
  background-color: #fff;
}
.contentList > li:nth-of-type(1) {
  height: 52px;
  margin-bottom: 4px;
  margin-top: 4px;
}
.contentList > li {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 16px;
  box-sizing: border-box;
  padding: 5% 5%;
}
.logout {
  margin: auto;
}
/deep/.van-button--info {
  background-color: #fff;
  border-color: red;
  color: red;
}
/deep/.van-button--info {
  color: black !important;
}
</style>